<template>
	<view class="page">
		<view class="choose-nickname-row">
			<view class="tit">
				客户序号
			</view>
			<view class="tit">
				{{form.id||''}}
			</view>
		</view>
		<view class="choose-nickname-row">
			<view class="tit">
				企业名称
			</view>
			<view class="tit">
				{{form.name||''}}
			</view>
		</view>
		<view class="content" v-for="(i,index) in dataList">
			<view class="top">
				<view class="left">
					<image src="@/static/my/circle.png" mode=""></image>
					<view class="name">
						报价人：{{i.nickname||'-'}}
					</view>
				</view>
				<view class="time">
					{{i.createtime||''}}
				</view>
			</view>
			<view class="main">
				<view class="">
					一口价 {{i.price||'-'}} 
				</view>
				<view class="">
					分水期  丰:{{i.watershed_f||'-'}}，平:{{i.watershed_p}}，枯:{{i.watershed_k}}
				</view>
				<view class="">
					浮动电价  丰:{{i.activity_price_f||'-'}}，平:{{i.activity_price_p}}，枯:{{i.activity_price_k}}
				</view>
				<view class="">
					备注：{{i.notes_p||'-'}}
				</view>
				<view class="">
					注：单位（元/MWh）
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		quotation
	} from "@/request/homeApi.js";
	export default {
		data() {
			return {
				show: false,
				value: '',
				form: {},
				placeholderStyle: {
					fontSize: "28rpx",
					color: "#D9D9D9",
				},
				dataList: []
			};
		},
		onLoad(e) {
			this.getList(e.id)
		},
		methods: {
			// 报价详情
			getList(id) {
				let that = this;
				quotation({
					custom_lists_id: id
				}).then(res => {
					if (res.code == 200) {
						that.form = res.data.data
						that.dataList = res.data.quotation
					} else {
						uni.showToast({
							title: res.msg,
							duration: 1500,
							icon: 'none',
						})
					}
				})
			},
		},
	};
</script>

<style lang="scss" scoped>
	tr:nth-child(2n+3) {
		// background-color: rgb(22, 73, 150);
	}

	table {
		font-size: 26rpx;
		// background-color: rgb(16, 112, 201);
	}

	table .one {
		width: 13% !important;
		// background-color: rgb(16, 112, 201);
	}

	.right {
		width: 98%;
		height: 54rpx;
		line-height: 54rpx;
		// background: #F8F8F8;
		padding: 0 10rpx;
		display: flex;
		font-size: 26rpx;
		justify-content: space-between;
	}

	table tr {
		text-align: center;
		display: flex;
		color: #000;
	}

	//文本居中
	table th {
		text-align: center;
		width: 29%;
		padding: 10rpx 0;
		border: 1rpx solid ghostwhite;
	}

	table td {
		text-align: center;
		width: 29%;
		padding: 10rpx 0;
		border: 1rpx solid ghostwhite;
	}

	.page {
		padding: 20rpx 38rpx;

		.content {
			width: 100%;
			font-size: 28rpx;
			margin: 10rpx 0;

			.main {
				border: 2rpx solid #D9D9D999;
				padding: 20rpx;
				border-radius: 4rpx;
				color: #979797;
			}

			.top {
				height: 90rpx;
				line-height: 90rpx;
				display: flex;
				justify-content: flex-start;
				align-items: center;

				.left {
					display: flex;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					width: 60%;

					image {
						width: 22rpx;
						height: 22rpx;
						margin-right: 10rpx;
					}
				}

				.time {
					color: #979797;
					font-size: 26rpx;
				}

			}
		}

		.choose-nickname-row {
			width: 100%;
			height: 5%;
			text-align: left;
			padding: 16px 2px 4px;
			font-size: 28rpx;
			margin: 10rpx auto;
			border-bottom: 3rpx solid #F2F2F2;

			.tit {
				height: 50rpx;
				line-height: 50rpx;
				display: flex;
				align-items: center;
				font-size: 28rpx;
				justify-content: space-between;
				color: #000;
				margin-bottom: 20rpx;

				.right {
					width: 40%;
					display: flex;
					align-items: center;
					font-size: 24rpx;
					justify-content: space-between;

					.re {
						background: #58B99D;
						color: #fff;
						padding: 0rpx 36rpx;
						border-radius: 10rpx;
					}

					.cle {
						background: #D9D9D999;
						color: #979797;
						padding: 0 36rpx;
						border-radius: 10rpx;
					}

				}
			}

			/deep/.input {
				color: #000;
			}

		}

		/deep/ .u-line {
			border-color: #D9D9D999;
		}
	}
</style>